<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta http-equiv="X-UA-Compatible" content="IE=8"/>
  <title>registerd</title>
  <script type="text/javascript" src="js/getRequest.js"></script>
  <script type="text/javascript">
  var isIE8 = myBrowser();
  if (isIE8) {
    document.write("<link href='css/bootstrap-common.min.css' rel='stylesheet'>"); 
  } else {
    document.write("<link href='"+ onlineURL +"plugins/bootstrap/css/bootstrap.min.css?v=170418' rel='stylesheet' media='screen'>"); 
  }
  </script>
  <link rel="stylesheet" href="css/style.css">
  <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
  <![endif]-->
  <script type="text/javascript">
    document.write("<script src='"+ onlineURL +"plugins/jquery.min.js?v=170418'><\/script>"); 
  </script>
  <script type="text/javascript">
    document.write("<script src='"+ onlineURL +"plugins/echarts/echarts.min.js?v=170418'><\/script>"); 
  </script>
</head>

<body>
<div class="container-fluid">
  <h3>在籍人数情况</h3>
  <div id="registerd" class="content">
    <div id="topSumNum" class="top row"></div>

    <div class="middle">
      <h4>数据分析</h4>
      <div id="brokenLine"></div>
    </div>

    <div class="bottom">
      <h4>数据统计</h4>
      <div id="table">
        表格
      </div>
    </div>    
  </div>
</div>

<script id="sumNumber" type="text/html">
{{each pageMaplist as value i}}
<div class="inline-item col-lg-3 col-md-3 col-sm-3">
  <div class="item-parent text-center">
    <div class="item-child">
      <p><span class="text-mute">{{value.studentlayername}}</span></p>
      <p><span id="mToJonior" class="text-number">{{value.registernum}}</span><span class="mute"> 人</span></p>
    </div>
  </div>
</div>
{{/each}}
</script>

<script id="myTable" type="text/html">
<table class="table table-bordered table-condensed text-center">
  <tbody>
    <tr class="text-center">
      <th class="text-center">函授站</th>
      <th class="text-center">在籍人数</th>
      <th class="text-center">课程进修人数</th>
    </tr>
    {{each pageMaplist as value i}}
    <tr class="text-center">
      <td class="text-center">{{value.stationname}}</td>
      <td class="text-center">{{value.registernum}}</td>
      <td class="text-center">{{value.cousestudynum}}</td>
    </tr>
    {{/each}}
    </tbody>
  </table>
</script>

<script type="text/javascript" src="js/template.js"></script>
<script type="text/javascript">
$(function() {
  var tableHtml = '',
      parameters = getParameters(),
      thisUrl = getSite(),
      itemSystem = {itemSystemIds:'2c9091fd58f2acfb0158f2ad0268000a;2c9091fd58f2acfb0158f2ad0268000c'},
      WithoutitemSystem = WithoutitemSystemIds(),
      sumData = Object.assign(itemSystem,WithoutitemSystem);

  $.ajax({
    type: 'GET',
    url: thisUrl,
    data:parameters,
    dataType: 'json',
    success: function(data) {
      myData = data.pageMaplist;
      // artTemplate 渲染表格
      getTable(data);
      // 设定表格宽度
      $('tr th').css('width','30%');
      // 得到折线图
      getBrokenLine(myData);
    },
    error: function(data) {
    	  document.write(data.responseText);
     }
  })

  // 得到总数
  $.ajax({
    type: 'GET',
    url: thisUrl,
    data: sumData,
    dataType: 'json',
    success: function(data) {
      var sumNumHtml = template('sumNumber', data);
      $('#topSumNum').html(sumNumHtml);
    }
  })
})

function getTable(data) {
  var tableHtml = template('myTable', data);
  $('#table').html(tableHtml);
};

function getBrokenLine(myData) {
  var myChart = echarts.init(document.getElementById('brokenLine'));

  var legendArr = ['在籍人数','课程进修人数'],
      stationnameArr = [],
      registernumArr = [],
      cousestudynumArr = [];

  myData.forEach(function(ele) {
    registernumArr.push(ele.registernum);
    cousestudynumArr.push(ele.cousestudynum);
    stationnameArr.push(ele.stationname);
  });

  var option = {
    color: ['#F7A664','#7EC3D5'],
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:legendArr
    },
    xAxis:  {
        type: 'category',
        boundaryGap: true,
        data: stationnameArr,
        axisLine: {
            show: true,
            lineStyle: {
                color: '#CCCCCC'
            }
        },
        axisTick: {
            show: false,
        },
        splitLine: {
            show: false
        },
        axisLabel: {
            interval: 0,
            rotate: 15
        }
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            show: true,
            formatter: '{value}'
        },
        splitLine: {
            show: false,
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: false,
            lineStyle: {
            color: '#CCCCCC'
          }
        },
        splitLine: {
            show: true
        }
    },
    series: [
        {
            name:'在籍人数',
            type:'line',
            data:registernumArr,
            symbol: 'circle'
        },
        {
            name:'课程进修人数',
            type:'line',
            data:cousestudynumArr,
            symbol: 'rect'
        }
    ]
  };
  myChart.setOption(option);

  addEvent(myChart, 'resize', function() {
    myChart.resize();
  });

}

</script>
</body>
</html>  
